ㄧ.Forms:文本框的變化與附加顯示
<body data-spy="scroll" data-target="#nav-demo">
  <div class="component" id="demo" style="height: 300vh">
    <input type="text" class="form-control-sm" placeholder="輸入...">
    <input type="text" class="form-control" readonly placeholder="輸入...">
    <input type="text" class="form-control-plaintext" placeholder="輸入...">
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="輸入...">
      <span class="input-group-prepend">
        <button class="btn btn-primary">Go</button>
      </span>
    </div>
  </div>
</body>
.demo.component{
  padding: 50px;
}
重點:
.form-control-sm小尺寸,.form-control-lg大尺寸
readonly為僅能閱讀
如果您希望將 元素設置為純文本,請使用 .form-control-plaintext 來刪除預設表單純文字樣式,並保留適當的邊距和填充。
.input-group為input群組,父元素為.input-group
@為span.input-group-text
再來就是input type="text"
第三個為按鈕,基本的樣式與對齊的span.input-group-prepend